<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <navigator class="back-btn" @click="goBack">←</navigator>
      <text class="title">服务详情</text>
      <view class="action-btns">
        <view class="share-btn" @click="shareService">分享</view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view scroll-y="true" class="content" :scroll-top="scrollTop">
      <!-- 服务头部信息 -->
      <view class="service-header">
        <view class="service-image">
          <image :src="serviceDetail.image" mode="aspectFill" class="main-image"></image>
          <view class="service-tags">
            <view class="service-tag hot" v-if="serviceDetail.isHot">热门</view>
          </view>
        </view>
        
        <view class="service-basic-info">
          <text class="service-name">{{serviceDetail.name}}</text>
          <view class="service-rating">
            <view class="stars">
              <text class="star" v-for="n in 5" :key="n">{{n <= serviceDetail.rating ? '★' : '☆'}}</text>
            </view>
            <text class="rating-text">{{serviceDetail.rating}}分</text>
          </view>
          <view class="service-price">
            <text class="current-price">¥{{serviceDetail.currentPrice}}</text>
            <text class="original-price" v-if="serviceDetail.originalPrice">¥{{serviceDetail.originalPrice}}</text>
          </view>
          <text class="service-desc">{{serviceDetail.description}}</text>
        </view>
      </view>

      <!-- 服务特色 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">服务特色</text>
        </view>
        <view class="card-content">
          <view class="features">
            <view class="feature-item" v-for="(feature, index) in serviceDetail.features" :key="index">
              <text class="feature-icon">{{feature.icon}}</text>
              <view class="feature-content">
                <text class="feature-title">{{feature.title}}</text>
                <text class="feature-desc">{{feature.desc}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务内容 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">服务内容</text>
        </view>
        <view class="card-content">
          <view class="service-content">
            <text class="content-text">{{serviceDetail.content}}</text>
            <view class="content-items">
              <view class="content-item" v-for="(item, index) in serviceDetail.contentItems" :key="index">
                <text class="item-icon">✓</text>
                <text class="item-text">{{item}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 适用人群 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">适用人群</text>
        </view>
        <view class="card-content">
          <view class="suitable-groups">
            <view class="group-item" v-for="(group, index) in serviceDetail.suitableGroups" :key="index">
              <text class="group-icon">{{group.icon}}</text>
              <text class="group-text">{{group.text}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务流程 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">服务流程</text>
        </view>
        <view class="card-content">
          <view class="process-steps">
            <view class="process-step" v-for="(step, index) in serviceDetail.process" :key="index">
              <view class="step-number">{{index + 1}}</view>
              <view class="step-content">
                <text class="step-title">{{step.title}}</text>
                <text class="step-desc">{{step.desc}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 常见问题 -->
      <view class="card">
        <view class="card-header">
          <text class="card-title">常见问题</text>
        </view>
        <view class="card-content">
          <view class="faq-list">
            <view class="faq-item" v-for="(faq, index) in serviceDetail.faq" :key="index">
              <view class="faq-question" @click="toggleFaq(index)">
                <text class="faq-q">{{faq.question}}</text>
                <text class="faq-icon">{{activeFaq === index ? '−' : '+'}}</text>
              </view>
              <view class="faq-answer" v-if="activeFaq === index">
                <text class="faq-a">{{faq.answer}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="service-actions">
        <view class="action-btn favorite" @click="toggleFavorite">
          <text class="action-icon">{{serviceDetail.isFavorite ? '♥' : '♡'}}</text>
          <text class="action-text">收藏</text>
        </view>
        <view class="action-btn consult" @click="contactConsult">
          <text class="action-icon">💬</text>
          <text class="action-text">咨询</text>
        </view>
      </view>
      <button class="purchase-btn" @click="purchaseService">立即预约 ¥{{serviceDetail.currentPrice}}</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      activeFaq: -1,
      serviceDetail: {
        id: 1,
        name: '健康体检服务',
        description: '为老人提供全面的健康体检服务，包括基础检查、专项检测和健康评估',
        image: '/static/images/regularUser/service1.png',
        isHot: true,
        discount: 8.5,
        rating: 4.9,
        reviewCount: 128,
        currentPrice: 100,
        originalPrice: 120,
        features: [
          { icon: '🏥', title: '全面检查', desc: '涵盖多项健康指标' },
          { icon: '⏱️', title: '快速出结果', desc: '2小时内出具报告' },
          { icon: '💉', title: '专业医生', desc: '资深医生解读报告' },
          { icon: '🏠', title: '上门服务', desc: '专业团队上门服务' }
        ],
        content: '我们的健康体检服务为老人提供全方位的健康检查，包括基础生命体征测量、血液检查、尿液检查、心电图等多项检查项目，确保全面了解老人的健康状况。',
        contentItems: [
          '基础生命体征测量',
          '血液常规检查',
          '尿液常规检查',
          '心电图检查',
          '血压血糖监测',
          '骨密度检测',
          '视力听力检查',
          '健康评估报告'
        ],
        suitableGroups: [
          { icon: '👵', text: '65岁以上老年人' },
          { icon: '💊', text: '慢性病患者' },
          { icon: '🔄', text: '定期健康监测人群' },
          { icon: '⚠️', text: '有家族病史人群' }
        ],
        process: [
          { title: '在线预约', desc: '选择服务时间和地点' },
          { title: '确认信息', desc: '客服确认订单信息' },
          { title: '上门服务', desc: '专业团队上门体检' },
          { title: '样本采集', desc: '采集血液、尿液等样本' },
          { title: '报告生成', desc: '实验室分析生成报告' },
          { title: '报告解读', desc: '医生解读并提供建议' }
        ],
        reviews: [
          {
            name: '王女士',
            avatar: '/static/images/users/user1.jpg',
            rating: 5,
            time: '2023-11-15',
            content: '服务非常专业，医生很有耐心，对老人的各项指标都解释得很清楚，非常满意！'
          },
          {
            name: '李先生',
            avatar: '/static/images/users/user2.jpg',
            rating: 4,
            time: '2023-11-10',
            content: '上门服务很方便，不用带老人去医院排队了，检查项目也很全面。'
          }
        ],
        faq: [
          {
            question: '体检前需要注意什么？',
            answer: '体检前需要空腹8-12小时，避免剧烈运动，如有特殊用药请提前告知医生。'
          },
          {
            question: '体检结果多久能出来？',
            answer: '常规检查结果2小时内出具，特殊检查项目可能需要1-2个工作日。'
          },
          {
            question: '可以定制体检项目吗？',
            answer: '可以根据老人的具体情况和需求，定制个性化的体检套餐。'
          },
          {
            question: '体检后会有跟进服务吗？',
            answer: '体检后会有专业医生进行报告解读，并提供健康管理和就医建议。'
          }
        ],
        isFavorite: false
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadServiceDetail(options.id)
    }
  },
  methods: {
    goBack() {
      uni.navigateTo({
      	url:"/pages/regularUser/regularUser"
      })
    },
    shareService() {
      uni.showActionSheet({
        itemList: ['分享给微信好友', '分享到朋友圈', '复制链接'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.shareToWechat()
              break
            case 1:
              this.shareToTimeline()
              break
            case 2:
              this.copyLink()
              break
          }
        }
      })
    },
    shareToWechat() {
      uni.showToast({
        title: '已分享给微信好友',
        icon: 'success'
      })
    },
    shareToTimeline() {
      uni.showToast({
        title: '已分享到朋友圈',
        icon: 'success'
      })
    },
    copyLink() {
      uni.setClipboardData({
        data: 'https://example.com/service/' + this.serviceDetail.id,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },
    toggleFaq(index) {
      this.activeFaq = this.activeFaq === index ? -1 : index
    },
    toggleFavorite() {
      this.serviceDetail.isFavorite = !this.serviceDetail.isFavorite
      uni.showToast({
        title: this.serviceDetail.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'success'
      })
    },
    contactConsult() {
      uni.navigateTo({
        url: '/pages/regularUser/goto/consult/consult?serviceId=' + this.serviceDetail.id
      })
    },
    purchaseService() {
      uni.navigateTo({
        url: '/pages/regularUser/goto/payService/orderConfirm/orderConfirm?serviceId=' + this.serviceDetail.id
      })
    },
    getStarRating(rating) {
      let stars = ''
      for (let i = 1; i <= 5; i++) {
        stars += i <= rating ? '★' : '☆'
      }
      return stars
    },
    viewAllReviews() {
      uni.navigateTo({
        url: '/pages/regularUser/goto/payService/serviceReviews/serviceReviews?serviceId=' + this.serviceDetail.id
      })
    },
    loadServiceDetail(id) {
      // 模拟根据ID加载不同的服务详情
      const services = {
        1: {
          id: 1,
          name: '健康体检服务',
          description: '为老人提供全面的健康体检服务，包括基础检查、专项检测和健康评估',
          image: '/static/images/regularUser/service1.png',
          currentPrice: 100,
          originalPrice: 120
        },
        2: {
          id: 2,
          name: '陪护散步服务',
          description: '专业陪护人员陪伴老人散步，确保安全的同时提供愉快的户外活动体验',
          image: '/static/images/regularUser/service2.png',
          currentPrice: 10,
          originalPrice: 15
        },
        3: {
          id: 3,
          name: '送餐上门服务',
          description: '为老人提供营养均衡的餐食，按时送达，确保饮食健康',
          image: '/static/images/regularUser/service3.png',
          currentPrice: 5,
          originalPrice: 8
        },
        4: {
          id: 4,
          name: '心理疏导服务',
          description: '专业心理咨询师为老人提供心理疏导和情感支持，缓解心理压力',
          image: '/static/images/regularUser/service4.png',
          currentPrice: 20,
          originalPrice: 25
        }
      }
      
      if (services[id]) {
        this.serviceDetail = { ...this.serviceDetail, ...services[id] }
      }
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 顶部导航栏 */
.top-bar {
  padding: 15px 20px;
  background: #FD995E;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(253, 153, 94, 0.3);
}

.back-btn {
  font-size: 24px;
  color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex: 1;
}

.action-btns {
  display: flex;
  align-items: center;
}

.share-btn {
  color: white;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 15px;
  background-color: rgba(255,255,255,0.2);
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
  padding-bottom: 80px;
}

/* 服务头部信息 */
.service-header {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.service-image {
  position: relative;
  height: 200px;
}

.main-image {
  width: 100%;
  height: 100%;
}

.service-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
}

.service-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.service-tag.hot {
  background-color: #ff5722;
}

.service-tag.discount {
  background-color: #FD995E;
}

.service-basic-info {
  padding: 20px;
}

.service-name {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.service-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  color: #ffc107;
  margin-right: 5px;
}

.star {
  font-size: 16px;
}

.rating-text {
  font-size: 14px;
  color: #FD995E;
  margin-right: 5px;
}

.rating-count {
  font-size: 12px;
  color: #999;
}

.service-price {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.current-price {
  font-size: 24px;
  font-weight: bold;
  color: #FD995E;
  margin-right: 10px;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.service-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  background-color: #FFF8F0;
  border-bottom: 1px solid #FFE0C2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #FD995E;
}

.view-all {
  font-size: 14px;
  color: #FD995E;
}

.card-content {
  padding: 20px;
}

/* 服务特色 */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  width: calc(50% - 8px);
}

.feature-icon {
  font-size: 24px;
  margin-right: 10px;
  flex-shrink: 0;
}

.feature-content {
  flex: 1;
}

.feature-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.feature-desc {
  display: block;
  font-size: 13px;
  color: #666;
}

/* 服务内容 */
.content-text {
  display: block;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.content-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-item {
  display: flex;
  align-items: center;
  width: calc(50% - 5px);
  margin-bottom: 8px;
}

.item-icon {
  color: #4caf50;
  margin-right: 8px;
  font-weight: bold;
}

.item-text {
  font-size: 14px;
  color: #333;
}

/* 适用人群 */
.suitable-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.group-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(25% - 12px);
  text-align: center;
}

.group-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.group-text {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

/* 服务流程 */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-step {
  display: flex;
  align-items: flex-start;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #FD995E;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: 5px;
}

.step-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.step-desc {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 用户评价 */
.reviews-summary {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.rating-overview {
  text-align: center;
  padding-right: 20px;
  min-width: 120px;
}

.overall-rating {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #FD995E;
  margin-bottom: 5px;
}

.overall-text {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-stars {
  color: #ffc107;
  font-size: 14px;
  margin-right: 10px;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.review-content {
  display: block;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* 常见问题 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
}

.faq-q {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  flex: 1;
  margin-right: 10px;
}

.faq-icon {
  font-size: 18px;
  color: #FD995E;
  font-weight: bold;
}

.faq-answer {
  padding: 15px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
}

.faq-a {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-actions {
  display: flex;
  gap: 15px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s;
}

.action-btn.favorite {
  color: #FD995E;
}

.action-btn.consult {
  color: #666;
}

.action-icon {
  font-size: 20px;
  margin-bottom: 3px;
}

.action-text {
  font-size: 12px;
}

.purchase-btn {
  background: #FD995E;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(253, 153, 94, 0.3);
  transition: all 0.3s;
}

.purchase-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(253, 153, 94, 0.3);
}
</style>